<template>
	<div class="works">
		<img
			v-for="(src,i) in course.works"
			:key="i"
			:src="src"
		>
		<!-- <Iconfont
			class="arrow-right"
			name="icon-arrow-right"
			size="30"
			weight="bold"
			color="#00C9A9"
		/> -->
	</div>
</template>

<script>
export default {
  props: {
    course: Object
  }
}
</script>

<style lang='scss' scoped>
.works {
  position: relative;
  display: flex;
  overflow-x: auto;
  white-space: nowrap;

  // &::after {
  //   position: absolute;
  //   right: 0;
  //   width: 162px;
  //   height: 300px;
  //   content: '';
  //   background: linear-gradient(270deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  // }

  .arrow-right {
    position: absolute;
    top: 150px;
    right: 48px;
    z-index: 10;
    cursor: pointer;
  }

  img:not(:last-of-type) {
    margin-right: 32px;
  }
}
</style>
